vue中实时监听input中字符长度并限制,Element

您所在的位置:网站首页 el-input value计算 vue中实时监听input中字符长度并限制,Element

vue中实时监听input中字符长度并限制,Element

2023-10-03 12:27| 来源: 网络整理| 查看: 265

用vue写的后台管理系统,input需要限制输入内容的字符长度

 

(如果需要限制字符串的长度,只需要使用element-ui中的input的maxlength和minlength属性即可,原生的input同样的做法)

 

如果是限制字符长度,el-input覆盖了原生的方法,需要将el-input元素更换成原生input,如果想保持el-input 的样式,只需要给input添加 el-input__inner 的class

 

 

现在我们只需要写widthCheck这个方法即可,因为一个汉字是两个字符,字母和符号为1个字符,所以我们判断为汉字的长度*2变为两个字符,其余不变。

 

如果长度大于了我们定义的100,就可以用substr的方法,去掉限制长度后的字符

 

// 限制输入框输入的字符数 widthCheck (str, len) { var temp = 0 for (var i = 0; i < str.value.length; i++) { if (/[\u4e00-\u9fa5]/.test(str.value[i])) { temp += 2 } else { temp++ } if (temp > len) { str.value = str.value.substr(0, i) } } }

这样,既限制了输入内容的字符长度,又实现了数据处理以后的双向数据绑定。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3